import cn from 'classnames';
import PropTypes from 'prop-types';
import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router';
import TokenPane from './tokenPane';
import URLPane from './urlPane';
// import Tabs from '@knownsec/react-component/dist/Tabs';
import Tabs, { TabPane } from '@kuiper-components/tabs';
import s from './style.module.css';
import Breadcrumb, { Item } from '../../components/Breadcrumb';

function ApiPage () {
	const [activeKey, setActiveKey] = React.useState('token')
	const { balance } = JSON.parse(sessionStorage.getItem('resD') || null)
	useEffect(() => {
		if (!balance?.api || balance?.api?.time <= 0) {
			window.location.href = '/#/'
		}
	}, [])
	return (<>
		{balance?.api && balance?.api?.time > 0 && <div className={s.backupRecovery}>
			<div className={s.header}>
				<Breadcrumb className={s.breadcrumb}>
					<Item disabled key="policy-manage">
						综合管理
					</Item>
					<Item active key="api-page">
						API管理
					</Item>
				</Breadcrumb>
			</div>
      <div className={s.bBox}>
        <Tabs className={s.tabs}  activeKey={activeKey} onChange={e => setActiveKey(e)}>
          <TabPane tab={<span className={s.tabTitle}>授权Token</span>} key='token'>
						<TokenPane />
          </TabPane>
          <TabPane
            tab={
              <span className={s.tabTitle}>
                推送URL
              </span>
            }
            key='url'
          >
            <URLPane />
          </TabPane>
        </Tabs>
      </div>
    </div>}
	</>)
}
export default withRouter(ApiPage);
